<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法4 v-model双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1:v-model双向绑定</h1>
        <h3>我们可以使用v-model指令在表单的各种DOM元素进行双向的数据绑定。它会根据我们的控件的类型自动更新元素
            同时，它会忽略所有表单元素中的Value,checked,selected等属性的初始值。
        </h3>
        <h3>1.单行文本框</h3>
        <input type="text" v-model="singleText">{{singleText}}
        <h3>2.多行文本框</h3>
        <textarea v-model="multiText"></textarea>{{multiText}}
        <h3>3.单选框</h3>
            <h4>单选框在实际中是不能单独使用的，一般是两个及以上，可以设置一个共有的v-model中的变量
                那么就可以实现radiogroup的效果
            </h4>
            <input type="radio" value="A" v-model="radioValue">上班
            <input type="radio" value="B" v-model="radioValue">下班
            <input type="radio" v-model="radioValue" value="C">吃饭
            <input type="radio" v-model="radioValue" value="D">睡觉
            {{radioValue}}
        <h3>4.单个复选框:通常用来True或False的选择</h3>
            <input type="checkbox" v-model="toggleValue">是否尘缘已尽
            {{toggleValue}}
        <h3>多个复选框：v-model接受数组类型的变量</h3>
            <input type="checkbox" v-model="checkedValue" value="贸易">A.自由民主
            <input type="checkbox" v-model="checkedValue" value="轮船">B.海上运输
            <input type="checkbox" v-model="checkedValue" value="黑巧">C.自动收割
            <input type="checkbox" v-model="checkedValue" value="内阁">D.国家政体
            {{checkedValue.join(',')}}
        <h3>6.单项下拉选项框</h3>
            <select v-model="singSelect">
                <option value="日内瓦">日内瓦</option>
                <option value="加沙">加沙</option>
                <option value="巴黎">巴黎</option>
                <option value="冰岛">冰岛</option>
            </select>
            {{singSelect}}
        <h3>7.多项下拉选择框</h3>
            <select v-model="multiSelect" multiple>
                <option value="日内瓦">日内瓦</option>
                <option value="加沙">加沙</option>
                <option value="巴黎">巴黎</option>
                <option value="冰岛">冰岛</option>
            </select>
            {{multiSelect}}
    <h1>知识点2：v-model修饰符</h1>
        <h3>1 .lazy修饰符 v-model在每次触发后将输入框的值与数据同步，添加lazy修饰符后，转变为change事件同步</h3>
        <h3>2 .number可以将用户的值转化为数字型</h3>
        <h3>3.tri修饰符</h3>
    </div>
</body>
</html>

<script>
    const appConn=Vue.createApp({
        data() {
            return {
                message:114514,
                singleText:'RAY',
                multiText:'',
                radioValue:'',
                toggleValue:true,
                checkedValue:[],
                singSelect:'',
                multiSelect:[]
            }
        },
    
    }).mount("#app")
</script>